<template>
    <div>
        <Header v-if="showHeader" title="招商考核"></Header>
        <van-sticky :offset-top="offsetTop">
            <FlexList :flexIconList="flexIconList"></FlexList>
        </van-sticky>
        <div>
            <UserInfo :fromPage="false" :userInfo="userInfo"></UserInfo>
        </div>
         <!--滑动区域 ref='mescroll'不能删, 目的是路由切换时可通过ref调用mescroll-vue组件的beforeRouteEnter方法-->
        <mescroll-vue ref="collapseListMescroll" :up="mescrollUp" @init="mescrollInit">
            <div id="collapseLists">
                <ListCollapse :collapseList="collapseList"></ListCollapse>
            </div>
        </mescroll-vue>
        <!-- <div class="collapse_list" ref="collapse_list" :style="{minHeight:clientH}">
            <van-list :finished="finished" finished-text="没有更多了~" @load="onLoad" :offset="0" :immediate-check="false">
                <ListCollapse :collapseList="collapseList"></ListCollapse>
            </van-list>
        </div> -->
        <Loading v-show = "showLoading"></Loading>
    </div>
</template>
<script>
import MescrollVue from 'mescroll.js/mescroll.vue';
import { staffersDetail,staffersDetailLog } from "@/request/api.js";
import FlexList from "@/components/business/FlexList.vue";
import UserInfo  from "@/components/business/UserInfo.vue";
import ListCollapse from '@/components/business/ListCollapse.vue';
import Loading from "@/components/Loading.vue";
import Header from "@/components/Header.vue";
export default {
    name:'Business',
    data(){
        return {
            showHeader:this.$store.state.showHeader,
            showLoading:true,
            clientH:200+'px',
            offsetHeight:0,
            title:'招商考核',
            offsetTop:0,
            styles:false,
            userInfo:{},
            flexIconList:[
                {text:'我要申请',icon:require('@/assets/images/icon1.png'),url:'/application'},
                {text:'我发起的',icon:require('@/assets/images/icon2.png'),url:'/sponsored'},
                {text:'我审批的',icon:require('@/assets/images/icon3.png'),url:'/accraditation'},
                {text:'下属员工',icon:require('@/assets/images/icon4.png'),url:'/subordinates'}
            ],
            finished: false,
            mescroll: null,
            collapseList:[],
            mescrollUp: {
                callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
                page: {
                    num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                    limit: 5 // 每页数据的数量
                },
                noMoreSize: 3, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                empty: {
                    // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
                    warpId: 'collapseLists', // 父布局的id;
                    tip: '没有更多了~', // 提示
                },
                htmlNodata: '<p class="upwarp-nodata">没有更多了~</p>', // 无数据的布局
            },
            // page: 1,
            // limit: 5,
            // timer: null
        }
    },
    components:{
        UserInfo,
        FlexList,
        ListCollapse,
        Loading,
        Header,
        MescrollVue,},
    created(){
        if (this.$route.query.staffer_id) {
            console.log(this.$route.query.staffer_id)
            let id = this.$route.query.staffer_id;
            localStorage.setItem('staffer_id',id);
            this.$store.commit('setStaffer_id',id);
        }
        if (this.$route.query.token) {
            console.log(this.$route.query.token)
            let token = this.$route.query.token;
            localStorage.setItem('token',token);
            this.$store.commit('setToken',token);
        }
    },
    mounted(){
        // console.log(this.$refs.collapse_list.offsetHeight)
        // this.offsetHeight = -(this.$refs.collapse_list.offsetHeight - 300);
        // console.log(this.offsetHeight)
        // console.log(this.$store.state.token)
        staffersDetail({token:this.$store.state.token,id:this.$store.state.staffer_id}).then(res=>{
            console.log(res)
            let list = res;
            this.userInfo = list.data;
            this.showLoading = false;
        }).catch(error=>{
            console.log(error)
            this.showLoading = false;
        });
        // staffersDetailLog({token:this.$store.state.token,id:this.$store.state.staffer_id,page:this.page,page_num:this.limit}).then(res=>{
        //     this.page = 2;
        //     let list = res.data.data;
        //     if (list.length) {
        //         this.collapseList=list;
        //         this.collapseList.map(item=>{
        //             if (Number(item.app_open_time.real_target) >= Number(item.app_open_time.target)) {
        //                 item.app_open_time.percentage = 100;
        //             }else if (Number(item.app_open_time.real_target)<Number(item.app_open_time.target)) {
        //                 item.app_open_time.percentage = (Number(item.app_open_time.real_target)/Number(item.app_open_time.target)).toFixed(2)*100;
        //             }
        //             if (Number(item.reg_user.real_target)>=Number(item.reg_user.target)) {
        //                 item.reg_user.percentage = 100;
        //             }else if (Number(item.reg_user.real_target) < Number(item.reg_user.target)) {
        //                 item.reg_user.percentage = (Number(item.reg_user.real_target)/Number(item.reg_user.target)).toFixed(2)*100;
        //             }
        //             if (Number(item.tm_article_share.real_target) >= Number(item.tm_article_share.target)) {
        //                 item.tm_article_share.percentage = 100;
        //             }else if (Number(item.tm_article_share.real_target)<Number(item.tm_article_share.target)) {
        //                 item.tm_article_share.percentage = (Number(item.tm_article_share.real_target)/Number(item.tm_article_share.target)).toFixed(2)*100;
        //             }
        //             if (Number(item.five_day_money.real_target) >= Number(item.five_day_money.target)) {
        //                 item.five_day_money.percentage = 100;
        //             }else if (Number(item.five_day_money.real_target) < Number(item.five_day_money.target)) {
        //                 item.five_day_money.percentage = (Number(item.five_day_money.real_target)/Number(item.five_day_money.target)).toFixed(2)*100;
        //             }
        //         });
        //     }
        // }).catch(error=>{
        //     console.log(error)
        //     this.showLoading = false;
        // })
    },
    methods:{
        // onLoad() {
        //     if(!this.timer){
        //         this.timer = setTimeout(() => {
        //             // 异步更新数据
        //             staffersDetailLog({token:this.$store.state.token,id:this.$store.state.staffer_id,page:this.page,page_num:this.limit}).then(res=>{
        //                 // console.log(res.data)
        //                 this.page += 1;
        //                 // console.log(this.page)
        //                 let list = res.data.data;
        //                 list.map(item=>{
        //                     if (Number(item.app_open_time.real_target) >= Number(item.app_open_time.target)) {
        //                         item.app_open_time.percentage = 100;
        //                     }else if (Number(item.app_open_time.real_target)<Number(item.app_open_time.target)) {
        //                         item.app_open_time.percentage = (Number(item.app_open_time.real_target)/Number(item.app_open_time.target)).toFixed(2)*100;
        //                     }
        //                     if (Number(item.reg_user.real_target)>=Number(item.reg_user.target)) {
        //                         item.reg_user.percentage = 100;
        //                     }else if (Number(item.reg_user.real_target) < Number(item.reg_user.target)) {
        //                         item.reg_user.percentage = (Number(item.reg_user.real_target)/Number(item.reg_user.target)).toFixed(2)*100;
        //                     }
        //                     if (Number(item.tm_article_share.real_target) >= Number(item.tm_article_share.target)) {
        //                         item.tm_article_share.percentage = 100;
        //                     }else if (Number(item.tm_article_share.real_target)<Number(item.tm_article_share.target)) {
        //                         item.tm_article_share.percentage = (Number(item.tm_article_share.real_target)/Number(item.tm_article_share.target)).toFixed(2)*100;
        //                     }
        //                     if (Number(item.five_day_money.real_target) >= Number(item.five_day_money.target)) {
        //                         item.five_day_money.percentage = 100;
        //                     }else if (Number(item.five_day_money.real_target) < Number(item.five_day_money.target)) {
        //                         item.five_day_money.percentage = (Number(item.five_day_money.real_target)/Number(item.five_day_money.target)).toFixed(2)*100;
        //                     }
        //                     this.collapseList.push(item);
        //                 })
        //                 // 数据全部加载完成
        //                 if (list.length < 5) {
        //                     this.finished = true;
        //                     this.showLoading = false;
        //                     return
        //                 }
        //             }).catch(error=>{
        //                 console.log(error)
        //                 this.showLoading = false;
        //             })
        //             this.timer = null;
        //         }, 800)
        //     }
        // },
        mescrollInit (mescroll) {
            this.mescroll = mescroll
        },
        // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
        upCallback (page,mescroll) {
            // console.log('pages'+page.num)
            // 联网加载数据
            staffersDetailLog({token:this.$store.state.token,id:this.$store.state.staffer_id,page:this.page,page_num:this.limit}).then(res=>{
                let list = res.data.data;
                let result = [];
                list.map(item=>{
                            if (Number(item.app_open_time.real_target) >= Number(item.app_open_time.target)) {
                                item.app_open_time.percentage = 100;
                            }else if (Number(item.app_open_time.real_target)<Number(item.app_open_time.target)) {
                                item.app_open_time.percentage = (Number(item.app_open_time.real_target)/Number(item.app_open_time.target)).toFixed(2)*100;
                            }
                            if (Number(item.reg_user.real_target)>=Number(item.reg_user.target)) {
                                item.reg_user.percentage = 100;
                            }else if (Number(item.reg_user.real_target) < Number(item.reg_user.target)) {
                                item.reg_user.percentage = (Number(item.reg_user.real_target)/Number(item.reg_user.target)).toFixed(2)*100;
                            }
                            if (Number(item.tm_article_share.real_target) >= Number(item.tm_article_share.target)) {
                                item.tm_article_share.percentage = 100;
                            }else if (Number(item.tm_article_share.real_target)<Number(item.tm_article_share.target)) {
                                item.tm_article_share.percentage = (Number(item.tm_article_share.real_target)/Number(item.tm_article_share.target)).toFixed(2)*100;
                            }
                            if (Number(item.five_day_money.real_target) >= Number(item.five_day_money.target)) {
                                item.five_day_money.percentage = 100;
                            }else if (Number(item.five_day_money.real_target) < Number(item.five_day_money.target)) {
                                item.five_day_money.percentage = (Number(item.five_day_money.real_target)/Number(item.five_day_money.target)).toFixed(2)*100;
                            }
                            result.push(item)
                        })
                if (page.num==1) {
                    this.collapseList = result;
                } else {
                    this.collapseList = this.collapseList.concat(result);
                }
                
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.$nextTick(() => {
                    mescroll.endSuccess(list.length)
                })
            }).catch(error=>{
                console.log(error);
                mescroll.endErr()
            })
        },
    },
    // beforeRouteEnter (to, from, next) {
    //     from.meta.keepAlive  = false;  
    //     next();
    // },
}
</script>
<style lang="less" scoped>
.mescroll {
    min-height: 200px;
    background-color: #fff;
}
</style>